<template>
<div class="up-image thumb" :style="{width:width,height:height}" @click="upload">
     <img class="none" v-show="!imgValue" :src="publicUrl(`/images/add-img.png`)" />
     <img class="img-value" v-show="imgValue" :src="imgValue" />


</div>
</template>
<script setup lang="ts" name="">
import { publicUrl,fileToBase64Async } from "@/utils/util";
import { ref } from "vue"
import getFile from "@/utils/getFile";
import { toast } from "vue3-toastify";

interface Props{
    width?:string ;
    height?:string;
    defValue?:string;
}
const props = withDefaults(defineProps<Props>(),{
    width:`.4583rem`,
    height:`.4583rem`,
    defValue:"",
})

const emits =  defineEmits<{
    (event:'change',baseStr:string):void;
}>()


const imgValue = ref<string>(props.defValue);

const upload = ()=>{
    getFile('image',undefined,{
        errorResult:(msg:string)=>toast.error(msg),
        successResult:(file:File)=> fileToBase64Async(file).then((res)=>{
            imgValue.value = res;
            emits("change",res);
        })
    })
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>